<template>
  <div>
    <el-dialog title="充值提示" :visible.sync="showcz" width="50%" :before-close="handleClose">
      <el-row class="content-box">
        <el-col>
          <el-tabs v-model="tabName" type="card">
            <el-tab-pane label="支付宝充值" name="first">
              <div class="first-box">
                <div>
                  <img src="@/assets/images/alipay.png" alt />
                </div>
                <div>
                  <p>付款后，请在下面输入转账的订单号，然后点击匹配订单号确认充值</p>
                  <el-form
                    ref="tiketsFormRef"
                    :model="tiketsForm"
                    :rules="tiketsFormRules"
                    class="demo-ruleForm"
                  >
                    <el-form-item prop="tikets">
                      <el-input v-model="tiketsForm.tikets" placeholder="*请输入转账的订单号" />
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div>
                <span slot="footer" class="dialog-footer">
                  <el-button type="warning" size="mini" @click="handleClose">取 消</el-button>
                  <el-button type="primary" size="mini" @click="checkTikets">匹配订单号</el-button>
                </span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="银联充值" name="second">
              <div class="first-box">
                <div>
                  <img src="@/assets/images/yinlian.png" alt />
                </div>
                <div>
                  <ul>
                    <li>
                      <span>转账途径</span>
                      <p>
                        网银、手机银行
                        <br />
                        <span>注意：请勿通过 支付宝 微信 转账</span>
                      </p>
                    </li>
                    <li>
                      <span>收款户名</span>
                      <p>朱鸿森</p>
                    </li>
                    <li>
                      <span>收款卡号</span>
                      <p>622908353081149012</p>
                    </li>
                    <li>
                      <span>收款银行</span>
                      <p>兴业银行</p>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="add-info">
                <p>
                  转账完成后，左框输入转账银行、户名及卡号后4位；右框输入充值金额；
                  <br />提交后转人工审核:9:00-23:00
                </p>
                <el-form
                  ref="yinlianFormRef"
                  :model="yinlianForm"
                  :rules="yinlianFormRules"
                  class="demo-ruleForm"
                >
                  <el-form-item prop="danhao">
                    <el-input v-model="yinlianForm.danhao" placeholder="*请输入转账的订单号" />
                  </el-form-item>
                  <el-form-item prop="num">
                    <el-input v-model="yinlianForm.num" placeholder="*请输入充值金额" />
                  </el-form-item>
                </el-form>
              </div>
              <div>
                <span slot="footer" class="dialog-footer">
                  <el-button type="warning" size="mini" @click="handleClose">取 消</el-button>
                  <el-button type="primary" size="mini" @click="checkMoneyInfo">已完成转账，提交转账信息</el-button>
                </span>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col>
          <h3>充值注意事项</h3>
          <ul>
            <li>● 支付宝仅支持100以下金额免费充值；</li>
            <li>● 充值100以上需扣除1%手续费，或使用银行卡免费充值；</li>
            <li>● 银行卡充值满300以上，可免费领取会员3天！</li>
          </ul>
          <p>注：以上有任何问题，请联系客服或管理员为您详细解答哦!感谢支持与配合，合作愉快，谢谢！</p>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showcz: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabName: 'first',
      tiketsForm: {
        tikets: ''
      },
      tiketsFormRules: {
        tikets: [
          { required: true, message: '请输入转账的订单号', trigger: 'blur' }
        ]
      },
      // 银联
      yinlianForm: {
        danhao: '',
        num: ''
      },
      yinlianFormRules: {
        danhao: [
          { required: true, message: '请输入转账的订单号', trigger: 'blur' }
        ],
        num: [{ required: true, message: '请输入充值金额', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('closeDia', false)
    },
    checkTikets() {},
    checkMoneyInfo() {}
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  display: flex;

  .el-col {
    &:nth-of-type(1) {
      flex: 1;
      padding-right: 20px;

      .el-button {
        &:nth-of-type(2) {
          width: 300px;
        }
      }

      .first-box {
        display: flex;

        div {
          font-size: 12px;
          &:nth-of-type(2) {
            padding: 0 10px;

            p {
              color: #f20;
              margin-bottom: 20px;
            }
          }
        }
      }

      li {
        display: flex;

        span {
          width: 60px;
        }

        p {
          font-size: 14px !important;
          color: #333 !important;
          margin-bottom: 4px !important;
          span {
            color: #f20;
            font-size: 12px;
          }
        }
      }
    }
    &:nth-of-type(2) {
      width: 220px;
      font-size: 12px;

      h3 {
        text-align: center;
        background-color: skyblue;
        color: #fff;
        line-height: 24px;
      }

      li {
        line-height: 24px;
      }

      p {
        color: #f20;
        margin-top: 20px;
      }
    }
  }
}

.add-info {
  margin-top: 10px;
  p {
    font-size: 12px;
    color: #f20;
  }

  .el-form {
    display: flex;

    .el-form-item {
      &:nth-of-type(1) {
        width: 270px;
        margin-right: 10px;
      }
    }
  }
}

img {
  width: 120px;
}
</style>
